import React from 'react';
import CheckWanning from './../common/errorMessage.js'

class LoginForm extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			username:'',
			password:'',
			nameError:'',
			passwordError:''
		};
		this.handleChange = this.handleChange.bind(this);
    	this.handleSubmit = this.handleSubmit.bind(this);
    	this.userCheck = this.userCheck.bind(this);
    	this.passwordCheck = this.passwordCheck.bind(this);
	}

	handleChange(event) {
		const target = event.target;
		const name = target.name;
		this.setState({[name]: target.value});
	}

	userCheck(event) {
		const minUsernameLength = 10;
		if(this.state.username.length < minUsernameLength) {
			this.setState({
				nameError:'this username is too short'
			});
		} 
	}

	passwordCheck(event) {
		const minUsernameLength = 10;
		if(this.state.password.length < minUsernameLength) {
			this.setState({
				passwordError:'this password is too short'
			});
		} 
	}

	handleSubmit(event) {
		alert('A name was submitted: ' + this.state.username+' '+this.state.password);
		event.preventDefault();
	}

	render() {
		return (
			<form onSubmit={this.handleSubmit}>
		        <label>
		          Name:
		          <input name="username" type="text" value={this.state.username} onBlur={this.userCheck} onChange={this.handleChange} />
		          <CheckWanning message={this.state.nameError} />
		        </label>
		        <label>
		          Password:
		          <input name="password" type="password" value={this.state.password} onBlur={this.passwordCheck} onChange={this.handleChange} />
		          <CheckWanning message={this.state.passwordError} />
		        </label>
		        <input type="submit" value="Submit" />
	      </form>
		);
	}
}

export default LoginForm;